﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>清洗服务</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/layer")
    <script src="~/Scripts/Common.js"></script>
    <link href="~/Content/Cleaning.css" rel="stylesheet" />
    <link href="~/Content/MobileDateSelect.css" rel="stylesheet" />
</head>
<body>
    <!--表单信息-->
    <div class="main">
        <div class="area">
            <header class="formHeader">
                必填项
            </header>
            <section>
                <div class="formContainer">
                    <span class="spanTitle">保单号<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" placeholder="请输入保单号" id="InsuranceOrderNO" maxlength="50" />
                    </span>
                </div>
                <div class="formContainer">
                    <span class="spanTitle">权益兑换码<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" placeholder="请输入权益兑换码" id="ConversionCode" maxlength="50" />
                    </span>
                </div>

                <div class="formContainer">
                    <span class="spanTitle">清洗设备<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" name="CleaningProduct" id="CleaningProduct" placeholder="请选择清洗设备" readonly="readonly">
                        <input type="hidden" value="" id="CleaningProductId" />
                        <span class="selectIcon"></span>
                    </span>
                </div>

                <div class="formContainer">
                    <span class="spanTitle">数量<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" name="Quantity" id="Quantity" onkeyup="onlyInputDecimal(this,0)" placeholder="请输入清洗设备数量">
                    </span>
                </div>

                <div class="formContainer">
                    <span class="spanTitle">期望服务时间<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" name="ServiceTimeStart" id="ServiceTimeStart" placeholder="选择开始日期" readonly="readonly">
                    </span>
                </div>
                <div class="formContainer">
                    <span class="spanTitle"></span>
                    <span class="spanInput">
                        <input type="text" name="ServiceTimeEnd" id="ServiceTimeEnd" placeholder="选择结束日期" readonly="readonly">
                    </span>
                </div>
                <div class="formContainer">
                    <span class="spanTitle">联系人<font color="red">*</font></span>
                    <span class="spanInput">
                        <a href="/ApplicationCleaning/CleaningServiceOrder/UserAddressIndex">
                            <input type="text" name="spanLikeInput" id="spanLikeInput" placeholder="请选择联系人" readonly="readonly">
                        </a>
                        <input type="hidden" value="" id="CleaningUserAddressId" />
                        <span class="selectIcon"></span>
                    </span>
                </div>
                @*<div class="formContainer">
                        <span class="spanTitle">手机号码<font color="red">*</font></span>
                        <span class="spanInput">
                            <input type="text" placeholder="请输入手机号码"  maxlength="11"/>
                        </span>
                    </div>*@
            </section>
        </div>
        <div class="area">
            <header class="formHeader">
                非必填项
            </header>
            <section>
                <div class="formContainer" style="border-bottom:none;">
                    <span class="spanTitle">备注</span><br />
                    <span class="spanInput">
                        <textarea name="txt" clos="100" id="Remark" rows="3" warp="virtual" placeholder="请填写备注信息" maxlength="50"></textarea>
                        <p class="countChar"><span id="currentCharCount">50</span>/50</p>
                    </span>
                </div>
            </section>
        </div>
        <div class="btnContainer">
            <button class="btn" id="submitForm">提交</button>
        </div>
    </div>

    <!--提示信息-->
    <div class="tipTop" style="display:none;">
        <div>
            <span>提示：</span>
            <span id="tipTopContent">当清洗设备为空调的时候，数量为出风口的数量，而不是空调的数量。</span>
        </div>
    </div>
    <!--清洗设备选择-->
    <div class="selectContainer selectCleaningEquipment" id="selectCleaningEquipment" style="display:none">
        <header>
            <span class="closeSelect">取消</span>
            <span class="sureSelect">确定</span>
        </header>
        <section id="cleaningEquipmenOptions">
            <div>
                <p>冰箱</p>
                <div class="describe" style="display:none;">
                    这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一
                </div>
            </div>
            <div>
                <p>洗衣机（波轮）</p>
                <div class="describe" style="display:none;">
                    这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一
                </div>
            </div>
            <div>
                <p>洗衣机（滚轮）</p>
                <div class="describe" style="display:none;">
                    这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一
                </div>
            </div>
            <div>
                <p>空调（悬挂）</p>
                <div class="describe" style="display:none;">
                    这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一
                </div>
            </div>
            <div>
                <p>空调（立式）</p>
                <div class="describe" style="display:none;">
                    这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一
                </div>
            </div>
            <div>
                <p>热水器（可拆）</p>
                <div class="describe" style="display:none;">
                    这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一
                </div>
            </div>
            <div>
                <p>热水器</p>
                <div class="describe" style="display:none;">
                    这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一段关于产品的描述这里是一
                </div>
            </div>
        </section>
    </div>

    <script src="~/Scripts/PageInit.js"></script>
    <script src="~/Scripts/MobileDateSelect.js"></script>
    <script type="text/javascript">
        $(function () {
            //=================日期插件
            var calendar = new LCalendar();
            calendar.init({
                'trigger': '#ServiceTimeStart', //标签id
                'type': 'datetime', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
                'minDate': (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate()), //最小日期
                'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
            });
            var calendar = new LCalendar();
            calendar.init({
                'trigger': '#ServiceTimeEnd', //标签id
                'type': 'datetime', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
                'minDate': (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate()+1), //最小日期
                'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
            });

            //=======选择清洗设备
            $(".closeSelect").on("click", function () {
                $(".selectContainer").hide(500);
            })
            $(".sureSelect").on("click", function () {
                var _selected = $(".selectedP").text();
                $("#CleaningProduct").val(_selected);
                $(".selectContainer").hide(500);
            })

            $("#cleaningEquipmenOptions p").on("click", function () {
                if ($(this).hasClass("selectedP"))
                    return;
                $("#cleaningEquipmenOptions p").removeClass("selectedP");
                $(this).addClass("selectedP");
                $(".describe").hide(200);
                $(this).next(".describe").show(200);
            })
            $("#CleaningProduct").on("click", function () {
                //获取城市列表
                $("#selectCleaningEquipment").show(500);
            })





            $("#contactPeople").on("click", function () {
                $("#start_date").trigger("click");
            })


            $("#Remark").on("keyup", function () {
                let _len = $(this).val().length;
                $("#currentCharCount").html(50 - _len);
            })

            //表单提交
            $("#submitForm").on("click", function () {
                let _data = {};
                _data.InsuranceOrderNO = $("#InsuranceOrderNO").val();
                _data.ConversionCode = $("#ConversionCode").val();
                _data.Quantity = $("#Quantity").val();
                _data.CleaningProductId = $("#CleaningProductId").val();
                _data.ServiceTimeStart = $("#ServiceTimeStart").val();
                _data.ServiceTimeEnd = $("#ServiceTimeEnd").val();
                _data.CleaningUserAddressId = $("#CleaningUserAddressId").val();
                _data.Remark = $("#Remark").val();

                if (!_data.InsuranceOrderNO) {
                    layer.msg("请输入保单号");
                    return false;
                }
                if (!_data.ConversionCode) {
                    layer.msg("请输入权益兑换码");
                    return false;
                }
                if (!_data.CleaningProductId) {
                    layer.msg("请选择清洗设备");
                    return false;
                }
                if (!_data.Quantity) {
                    layer.msg("请输入数量");
                    return false;
                }
                if (!_data.ServiceTimeStart && !_data.ServiceTimeEnd) {
                    layer.msg("请选择服务时间");
                    return false;
                }
                if (!_data.CleaningUserAddressId) {
                    layer.msg("请选择联系人");
                    return false;
                }
            })

        })
    </script>
</body>
</html>
